<template>
  <div class="about">
    <h1 data-aos="fade-up">This is an about page</h1>
    <img id="img" src="https://top.voc.com.cn/upload/default/20191201/1575168060430032.jpg"   @click="setAtr">
      <div class="home_bg1" >
      <h3 class="title_text " >安全</h3>
      <div class="title_line " ></div>
      <p class="matop">采用令牌技术，在服务端、客户端，对数据流进行双重加密和校验，确保数据的安全性，通过密钥协商机制实现</p>
      <p>移动端数据快速加密。</p>
    </div>
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />

    <animate-number :value="value" :during="3000"></animate-number>
    
    <div class="price_box" data-aos="fade-up">
      <h3 class="title_text " >IM即时通讯价格</h3>
      <div class="title_line " ></div>

      <div class="price_boxMain">
        <div class="price_boxMain_L" >
          <div class="price_boxMain_LTop">
            <h3>企业版</h3>
          </div>

          <ul>
            <li>基础IM即时通讯功能</li>
            <li>支持功能定制</li>
            <li>功能更完善</li>
            <li>允许商用</li>
          </ul>

          <div class="Btns" >价格详情</div>
        </div>

        <div class="price_boxMain_R">
          <div class="price_boxMain_RTop">
            <h3>定制版</h3>
            <!-- <p>2000元 / 月起 | 按需付费</p> -->
          </div>
          <ul>
            <li>基础IM即时通讯功能</li>
            <li>不支持功能定制</li>
            <li>不支持人工技术服务</li>
            <li>不可商用</li>
          </ul>
          <div class="BtnsR">价格详情</div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Vue from 'vue'
import { AddressEdit,Toast } from 'vant';
import animateNumber from 'animate-number'
Vue.use(AddressEdit).use(Toast);
export default {
  components: {
    animateNumber
    // [Progress .name]: Progress  //一定在注册组件的时候有name属性，不然会报错
  },
  data() {
    return {
      value:10,
      areaList:{},
      searchResult: []
    }
  },
  mounted(){
    this.AOS.init()
    document.getElementById('img').setAttribute("preview","1")
  },
  methods: {
    onSave() {
      Toast('save');
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [{
          name: '黄龙万科中心',
          address: '杭州市西湖区'
        }];
      } else {
        this.searchResult = [];
      }
    },
    setAtr(){       
      this.$previewRefresh()     
    }
  }
};
</script>
<style lang="scss" scoped>
.about{
  margin-bottom: 100px;
  // @extend .p-t20;
}
</style>